<template>
  <div style="width: 100%;">
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 2px solid #cccccc; padding-bottom: 10px">
      <span style="font-size: 17px; color: #333333;">柜机详情</span>
      <i class="el-icon-back" @click="handleBack()" style="font-size: 18px; color: deepskyblue; cursor: pointer;">返回</i>
    </div>
    <div style="display: flex;width: 100%;">
<!--      <div style="width: 300px;height: 200px; background-color: lightskyblue">-->
<!--        <img :src="" alt="" style="width: 100%; height: 100%;"></img>-->
<!--      </div>-->
      <div style="padding-left: 75px">
        <table>
          <tr align="left" style="height:70px">
            <td style="width: 100px;">柜机编码</td>
            <td style="width: 300px;">{{ machine.machineNumber }}</td>
            <td style="width: 100px;">所在地址</td>
            <td style="width: 370px;">
              {{ machine.position == null ? '' : machine.position.split('-').join('') }}{{ machine.address }}
            </td>
            <td style="width: 100px;">安装日期</td>
            <td style="width: 300px;">
              {{ machine.installDate === null ? '未安装' : formatOpenDate(machine.installDate) }}
            </td>
          </tr>
          <tr align="left" style="height:50px">
            <td style="width: 100px;">设备型号</td>
            <td style="width: 300px;">{{ machine.isModel }}</td>
            <td style="width: 100px;">箱格状况</td>
            <td style="width: 300px;">
              <el-link :underline="false" @click="goToBoxDetail(machine.id)" style="color:blue">{{ machine.useCount == null ? '0' : machine.useCount}}/20</el-link>
            </td>
            <td style="width: 100px;">开通时间</td>
            <td style="width: 300px;">
              {{ machine.openDate === null ? '' : formatOpenDateTime(machine.openDate) }}
              <button v-if="machine.openDate === null" style="margin-left: 10px" @click="machineStatus=4;handleOpen()">开通</button>
            </td>
          </tr>
          <tr align="left" style="height:50px">
            <td style="width: 100px;">系统版本</td>
            <td style="width: 300px;">{{ machine.systemVersion }}</td>
            <td style="width: 100px;">状态</td>
            <td style="width: 300px;">
              {{ machine.machineStatus === 0 ? '正常' : machine.machineStatus === 1 ? '已禁用' : machine.machineStatus === 2 ? '已关机' : machine.machineStatus === 3 ? '重启中' : machine.machineStatus === 4 ? '未开通' : '未知'}}&nbsp;&nbsp;
              <!--              <el-button v-if="machine.machineStatus !== 0" @click="machineStatus=0;handleOpen()" type="primary">开机</el-button>-->
              <el-button v-if="machine.machineStatus !== 1" @click="machineStatus=1;handleOpen()" type="danger">禁用</el-button>
              <el-button v-if="machine.machineStatus !== 3" @click="machineStatus=0;handleOpen()" type="primary">重启</el-button>
              <el-button v-if="machine.machineStatus !== 2" @click="machineStatus=2;handleOpen()" type="danger">关机</el-button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div style="width: 100%">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <table>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">ID</td>
              <td style="width: 300px;">
                {{ machine.id.toString().padStart(9, '0') }}
              </td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">柜机编码</td>
              <td style="width: 300px;">{{ machine.machineNumber }}</td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">所在地址</td>
              <td style="width: 300px;">
                {{ machine.position == null ? '' : machine.position.split('-').join('') }}{{ machine.address }}
              </td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">状态</td>
              <td style="width: 300px;">
                {{ machine.machineStatus === 0 ? '正常' : machine.machineStatus === 1 ? '已禁用' : machine.machineStatus === 2 ? '已关机' : machine.machineStatus === 3 ? '重启中' : machine.machineStatus === 4 ? '未开通' : '未知'}}
              </td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">安装日期</td>
              <td style="width: 300px;">
                {{ machine.installDate == null ? '未安装' : formatOpenDate(machine.installDate) }}
              </td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">开通日期</td>
              <td style="width: 300px;">
                {{ machine.openDate == null ? '未开通' : formatOpenDateTime(machine.openDate) }}
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane label="设备信息"  name="second">
          <table>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">设备名称</td>
              <td style="width: 300px;">{{ machine.machineName }}</td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">设备型号</td>
              <td style="width: 300px;">{{ machine.isModel }}</td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">系统版本</td>
              <td style="width: 300px;">{{ machine.systemVersion }}</td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">Android版本</td>
              <td style="width: 300px;">{{ machine.androidVersion }}</td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">Android安全补丁</td>
              <td style="width: 300px;">{{ machine.androidSecurityPatch }}</td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">S/N</td>
              <td style="width: 300px;">{{ machine.sn }}</td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">MAC</td>
              <td style="width: 300px;">{{ machine.mac }}</td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">主柜尺寸/cm</td>
              <td style="width: 300px;">{{ machine.primaryWidth }}x{{ machine.primaryHeight }}x{{ machine.primaryDepth }}</td>
            </tr>
            <tr align="left" style="height:50px">
              <td style="width: 200px;">副柜尺寸/cm</td>
              <td style="width: 300px;">{{ machine.secondaryWidth }}x{{ machine.secondaryHeight }}x{{ machine.secondaryDepth }}</td>
            </tr>
          </table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
// import {findMachineById, updateStatus} from "@/api/machine/VendingMachine";
import {findMachineById,updateStatus} from "@/api/machine/machine"
import machine from "@/views/machine/machine/index.vue";
export default {
  name: "machinedetail",
  data() {
    return {
      // machineList:[],
      activeName: 'first',
      // machines:{
      //   machineName:'',
      //   machineModel:'',
      //   machineVersion:'',
      //   androidVersion:'',
      //   androidSecurityPatch:'',
      //   sn:'',
      //   mac:'',
      // },
      machine:{
        id:'',
        // machineNumber:'',
        // position:'',
        // address:'',
        // isModel:'',
        // installDate:'',
        // openDate:'',
        // isType:'',
        // boxStatus:'',
        // machineStatus:'',
        // isDel:'',
        // // systemVersion:'',
        // storageStatus:'',
        // primaryWidth:'',
        // primaryDepth:'',
        // primaryHeight:'',
        // secondaryWidth:'',
        // secondaryDepth:'',
        // secondaryHeight:'',
      },
      id:this.$route.query.id,
      machineStatus:''
    }
  },
  created() {
    this.init();
  },
  methods: {
    /*规范时间格式 年月日*/
    formatOpenDate(date) {
      if (!date) return '--'; // 如果日期为空，则返回 '--'
      // 将日期转换为 Date 对象（如果是字符串的话）
      const d = date instanceof Date ? date : new Date(date);
      // 获取年月日
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
      const day = d.getDate().toString().padStart(2, '0');
      // 返回格式化的日期字符串，例如 '2024-08-27'
      return `${year}-${month}-${day}`;
    },
    /*规范时间格式 年月日 时分秒*/
    formatOpenDateTime(date) {
      if (!date) return '--'; // 如果日期为空，则返回 '--'

      // 将日期转换为 Date 对象（如果是字符串的话）
      const d = date instanceof Date ? date : new Date(date);

      // 获取年月日时分秒
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, '0');
      const day = d.getDate().toString().padStart(2, '0');
      const hour = d.getHours().toString().padStart(2, '0');
      const minute = d.getMinutes().toString().padStart(2, '0');
      const second = d.getSeconds().toString().padStart(2, '0');

      // 返回格式化的日期时间字符串，例如 '2024-08-27 12:34:56'
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    /*切换*/
    handleClick(tab, event) {
      console.log(tab, event);
    },
    goToBoxDetail(val){
      this.$router.push({path:'/boxList',query:{id:val}});
    },
    /*页面初始化*/
    init(){
      console.log(this.id);
      findMachineById(this.id).then(res => {
          this.machine = res.data;
          // console.log(this.machine+1287654321234565432)
      })
    },
    /*修改状态*/
    handleOpen(){
      const data = {
        id: this.machine.id,
        machineStatus: this.machineStatus
      }
      updateStatus(data).then(res => {
        if (res.code === 200) {
          console.log(data);
          console.log(res);
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.init();
        }else {
          this.$message({
            message: '操作失败',
            type: 'error'
          })
        }
      })
    },
    /*返回按钮*/
    handleBack(){
      this.$router.go(-1);
    },
}}
</script>
